<template>
  <div class="col over-auto">
    <common-table v-loading="tableLoading" show-index show-check-box :columns="columns" :list="list">
    </common-table>
    <template v-if="dialogVisible">
      <WarnDialog :dialogVis="dialogVisible" @update:dialogVis="closeDialog"></WarnDialog>
    </template>
  </div>
</template>

<script>
  import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
  import WarnDialog from "./dialog/warnDialog.vue"
  import { queryDeviceRealDataInfo } from "@/api/showManage/index"

  export default {
    components: {
      CommonTable,
      WarnDialog
    },
    props: {
      deviceCode: String
    },
    data() {
      return {
        columns: [
          {
            title: "参数名称",
            prop: "parameterName",
            sortable: true,
            align: "center"
          },
          {
            title: "参数代码",
            prop: "parameterCode",
            align: "center"
          },
          {
            title: "参数值",
            prop: "parameterValue",
            align: "center"
          },
          {
            title: "参数值名称",
            prop: "parameterValueName",
            align: "center"
          },
          {
            title: "最后更新时间",
            prop: "createTime",
            align: "center",
            sortable: true,
            render: (h, params) => {
              return h("span", params.row.createTime)
            }
          }
        ],
        list: [],
        tableLoading: false,
        dialogVisible: false,
        timeout: null
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {
      this.getTableList1()
    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      let _this = this
      this.timeout = setInterval(() => {
        _this.getTableList2()
      }, 10000)
    },
    beforeDestroy() {
      if (this.timeout) {
        clearInterval(this.timeout)
      }
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      handleDetail() {
        this.dialogVisible = true
      },
      closeDialog() {
        this.dialogVisible = false
      },
      async getTableList1() {
        this.tableLoading = true
        const { status, success, object, message } = await queryDeviceRealDataInfo({ deviceCode: this.deviceCode })
        if (status == 200) {
          this.list = object
        }
        this.tableLoading = false
      },
      async getTableList2() {
        // this.tableLoading = true
        const { status, success, object, message } = await queryDeviceRealDataInfo({ deviceCode: this.deviceCode })
        if (status == 200) {
          this.list = object
        }
        // this.tableLoading = false
      }
    }
  }
</script>
<style scoped></style>
